<template>
  <div class="clear-fans">
    <!-- 设置清理的条件 -->
    <el-form ref="form" class="el-form" :model="form" label-width="180px">
      <el-form-item label="检测到僵尸粉立即删除？">
        <el-switch v-model="form.delete"></el-switch>
      </el-form-item>
      <el-form-item class="check-circle" label="朋友圈检测？">
        <el-switch v-model="form.circle"></el-switch>
        <el-input
          class="check-circle-input"
          size="mini"
          v-model="form.time"
          placeholder="请设置检测时间"
          :disabled="!form.circle"
          maxlength="10"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item class="el-form-btn">
        <el-button size="small" type="primary" @click="onSubmit(1)">开始清理</el-button>
        <el-button size="small" type="info" @click="onSubmit(2)">停止清理</el-button>
      </el-form-item>
    </el-form>

    <!-- 管理 -->
    <el-table :data="tableData" stripe border height="60" class="table-data" style="width: 100%">
      <el-table-column label="筛选好友个数" prop="Count" width="120px"></el-table-column>
      <el-table-column label="删除好友个数" prop="DelCount" width="120px"></el-table-column>
      <el-table-column label="跳过筛选个数" prop="SkipCount" width="120px"></el-table-column>
      <el-table-column label="僵尸微信ID" prop="Zombies"></el-table-column>
      <el-table-column label="返回时间">
        <template slot-scope="scope">
          <span v-text="$options.filters.timeFilter(scope.row.RspTime)"></span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="任务id" prop="TaskId"></el-table-column> -->
      <el-table-column label="IsFinished">
        <template slot-scope="scope">
          <span v-if="scope.row.TaskId">true</span>
          <span v-else>false</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'ToolsClearFans',
  data() {
    return {
      form: {
        delete: false,
        circle: false,
        time: 72,
      },
    }
  },
  computed: {
    ...mapGetters({
      wechats: 'conversation/wechats',
      tableData: 'nedb/zombies'
    })
  },
  methods: {
    // 开始清理僵尸粉
    onSubmit(index) {
      let currentNavs = this.$store.getters['currentNavs']
      let currentWechats = this.$store.getters['currentWechats']
      let wechatId = currentWechats[currentNavs[this.$route.name]]
      //   微信昵称
      let wechatNick = wechatId
      for (const wechat of this.wechats) {
        if (wechat.WeChatId === wechatId) {
          wechatNick = wechat.WeChatNick
        }
      }
      if (!wechatId) {
        // 如果没有选择微信
        this.$message({
          message: '请先选择一个微信',
          type: 'warning'
        });
      } else if (index === 1) {
        // 开始清理僵尸粉
        this.form.wechatId = wechatId
        this.$store.dispatch('websocket/PostFriendDetectTask', this.form)
        this.$message({
          message: `微信：${wechatNick}，开始清理僵尸粉`,
          type: 'success'
        })
      } else {
        // 停止清理僵死粉
        this.$store.dispatch('websocket/PostStopFriendDetectTask', wechatId)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.clear-fans {
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-form {
    border-bottom: solid black 5px;
    position: relative;
    .el-form-item {
      margin: 0;
    }

    .check-circle {
      .check-circle-input {
        width: 100px;
        margin-left: 20px;
      }
    }

    .el-form-btn {
      position: absolute;
      top: 25%;
      right: 10%;
    }
  }
}
</style>
